<template>
  <div class="movie-wrap">
    <div class="nav-wrap">
      <router-link tag="div" to="/cities">
        {{city}}
        <span class="iconfont">&#xe661;</span>
      </router-link>
      <ul>
        <router-link to="/home/movies/intheaters" tag="li" active-class="active">
          热映
          <span></span>
        </router-link>
        <router-link to="/home/movies/comingsoon" tag="li" active-class="active">
          待映
          <span></span>
        </router-link>
      </ul>
      <div>
        <span class="iconfont">&#xe64f;</span>
      </div>
    </div>
    <transition
      :enter-active-class="`animate__animated animate__${enter}`"
      :leave-active-class="`animate__animated animate__${leave}`"
    >
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  data() {
    return {
      enter: '',
      leave: ''
    }
  },

  computed: {
    ...mapState(['city'])
  },

  watch: {
    $route(to, from) {
      const toId = to.meta.id
      const fromId = from.meta.id
      if (toId > fromId) {
        this.enter = 'slideInRight'
        this.leave = 'slideOutLeft'
      } else {
        this.enter = 'slideInLeft'
        this.leave = 'slideOutRight'
      }
    }
  }
}
</script>

<style lang='stylus' scoped>
@import '~@a/stylus/border.styl'
.movie-wrap
  height 100%
  display flex
  flex-direction column
  position relative
  padding-bottom .44rem
  .nav-wrap
    height .44rem
    display flex
    flex-direction row
    border_1px(0 0 1px 0)

    > div:first-child
      display flex
      width 80
      align-items center
      justify-content center
      color #666
      padding-left .15rem

    > ul
      flex 251
      display flex
      align-items center
      justify-content center
      li
        flex 1
        height 100%
        position relative
        display flex
        align-items center
        justify-content center
        &:first-child
          padding-left .5rem
        &:last-child
          padding-right .5rem
        span
          position absolute
          display block
          height 100%
          width .5rem
          
        &.active
          color #cc4c43
          span 
            border-bottom solid 2px #cc4c43

    > div:last-child
      display flex
      align-items center
      justify-content center
      width .44rem
      height .44rem
      border_1px(0 0 0 1px)

</style>